<template>
  <div :style="`width:${width ? width : '400px'}`">
    <el-input v-model="materialBatchId" style="display: none"></el-input>
    <el-input v-model="materialName" readonly placeholder="请选择物料批次" :disabled="readonly" @clear="handleClear">
      <template #append>
        <el-button class="button" @click="selectMaterialBatch" :disabled="readonly">选择物料批次</el-button>
      </template>
    </el-input>
  </div>
  <!--物料批次选择对话框-->
  <MaterialBatchSelectDialogComponent
    ref="materialSelectDialog"
    :materialId="materialId"
    @afterSubmit="afterMaterialBatchSelect"
    @dialogClosed="emit('closed')"
  />
</template>

<script setup lang="ts">
import urls from '@/api/request/urls';
import MaterialBatchSelectDialogComponent from '@/components/wms/MaterialBatchSelectDialogComponent.vue';
import type { MaterialBatch } from '@/types/interface/wms_interface';
import { onMounted, ref, watch } from 'vue';
import Request from '@/api/request/request';

const emit = defineEmits(['update:modelValue', 'afterSelectMaterialBatch', 'afterClickSelectButton', 'closed']); // 定义自定义事件
interface Props {
  readonly?: boolean; //是否只读，只读的话选择框不可用。
  materialNameType?: number; //加工后的物料名称
  width?: string;
  materialId?: string; //物料id，不是必须，但是如果是必须则默认物料批次的查询条件固定位物料
}
const props = withDefaults(defineProps<Props>(), {
  readonly: false,
  materialNameType: 1,
  width: '400px'
});
//物料批次id
const materialBatchId = defineModel<string | null>({
  required: false,
  default: ''
});
//判断物料批次id的值是内部变化还是外部变化，如果是内部变化则说明是用户自己选择的批次；如果是外部变化则说明是传入的，这个时候应该有默认的物料批次名称
const isInternalChangeOfmaterialBatchId = ref(true);
//物料批次名称
const materialName = defineModel<string>('materialName', {
  required: false,
  default: null
});
//如果一般用于编辑（带初始值传入，可以直接显示物料名）
watch(
  materialBatchId,
  async (newValue) => {
    if (isInternalChangeOfmaterialBatchId.value) {
      //表示内部的值发生变化，此时表示是在物料对话框选的，不用重新赋值
      isInternalChangeOfmaterialBatchId.value = false;
    } else {
      //如果是外部的值发生了变化
      if (newValue) {
        //如果外部的值发生了变化，且值存在
        //如果是外部传入的值变化,重新读取该id对应的物料批次信息
        const resData = await new Request(`${urls.API_URL_BACKSTAGE_WMS_WMSMATERIALBATCH}/${newValue}`).get();
        if (resData.success) {
          //设置文本框中的物料名
          setMaterialName(resData.data);
        }
      }
    }
  },
  { deep: true, immediate: true }
);
//如果一般用于父组件编辑失败，还能正确显示物料名
watch(
  materialName,
  async (newValue) => {
    if (newValue == null && materialBatchId.value) {
      //如果name为空，但是materialBatchId的值还存在，说明name被父组件清掉（如编辑失败），需要重新获取
      //重新读取该id对应的物料批次信息
      const resData = await new Request(`${urls.API_URL_BACKSTAGE_WMS_WMSMATERIALBATCH}/${materialBatchId.value}`).get();
      if (resData.success) {
        //设置文本框中的物料名
        setMaterialName(resData.data);
      }
    }
  },
  { deep: true, immediate: true }
);
// watch(
//   () => materialBatchId.value,
//   (newVal: string, oldVal: string) => {
//     if ((typeof newVal === 'undefined' || newVal === '') && typeof oldVal !== 'undefined' && oldVal.length > 0) {
//       // 如果当前值不存在并且上一个值不为空，则说明在父组件被清空了（比如在查询表单中被重置按钮清空）
//       //清空库区列表
//       warehouseAreaId.value = '';
//       warehouseAreas.value.splice(0, warehouseAreas.value.length);
//       //清空库位列表
//       warehouseSeatId.value = '';
//       warehouseSeats.value.splice(0, warehouseSeats.value.length);
//     }
//   },
//   { deep: true, immediate: true }
// );
//物料批次选择对话框
const materialSelectDialog = ref();
//点击选择物料批次
const selectMaterialBatch = async () => {
  //在点击选择按钮后，先清空表单验证
  emit('afterClickSelectButton');
  //打开物料批次选择对话框
  await materialSelectDialog.value.openDialog();
};
//获取在物料批次选择框选择的物料批次
const afterMaterialBatchSelect = (materialBatchs: MaterialBatch[]) => {
  isInternalChangeOfmaterialBatchId.value = true; //内部变化
  //将当前选择的物料批次返回
  if (materialBatchs.length > 0) {
    materialBatchId.value = materialBatchs[0].id!;
    setMaterialName(materialBatchs[0]);
  }
  emit('afterSelectMaterialBatch', materialBatchs);
};
//根据物料批次信息获取物料名称
const setMaterialName = (materialBatch: MaterialBatch) => {
  if (props.materialNameType == 1) {
    materialName.value = `${materialBatch.material!.name!}` + `（批次号:${materialBatch.batchNumber}、未入库数量：${materialBatch.pendingQuantity}）`;
  } else {
    materialName.value = `${materialBatch.material!.name!}` + `（批次号:${materialBatch.batchNumber}、库存数量：${materialBatch.totalInventory}）`;
  }
};
//清空选择物料批次
const handleClear = () => {
  materialBatchId.value = null;
};
</script>

<style scoped></style>
